<template>
	<view class="content">
		<view class="block list-block">
			<view class="detail-block">
				<view class="title">{{detail.title}}</view>
				<view class="time">
					<image class="imgs" :src="imageUrl+'/job_hunting/job_fair/time.png'"></image><text
						class="sub-title">开播时间：</text>{{detail.startTime}}
				</view>
			</view>
			<view class="detail-count">
				<view class="block tab-block">
					<view @click="tabActive=1" :class="tabActive==1?'active':''" class="tab-item">介绍</view>
					<view @click="tabActive=2" :class="tabActive==2?'active':''" class="tab-item">带岗企业</view>
				</view>
				<view v-if="tabActive==1" class="article-content">
					<mp-html :content="detail.introduce" />
				</view>
				<view v-if="tabActive==2" class="block list-block">
					<template v-if="detail.enterpriseList.length>0">
						<block v-for="(item,index) in detail.enterpriseList" :key="item.id">
							<view class="enterprise-block" :class="item.show?'show':''">
								<view class="enterprise-item" @click="detail.enterpriseList[index].show=!detail.enterpriseList[index].show">
									<image mode="aspectFill"
										:src="item.logoUrl?item.logoUrl:imageUrl+'/job_hunting/job_detail/enterprise.jpg'"
										class="photo"></image>
									<view class="info-block">
										<view class="name">{{item.enterpriseName}}</view>
										<view class="count">{{`包含${item.jobPublishList.length}个岗位`}}</view>
									</view>
									<view :class="item.show?'icon-icon_xialaxuanze':'icon-gengduo1'"
										class="iconfont">
									</view>
								</view>
								<view v-for="(item2,index2) in item.jobPublishList" :key="item2.id"
									@click="navigatePos(item2.id)" class="position-item">
									<view class="job-title">{{item2.jobTitle}}</view>
									<view class="address">{{item2.jobAddress}}</view>
									<view class="wage">{{item2.minSalary}}-{{item2.maxSalary}}
										<view class="unit">元</view>
									</view>
								</view>
							</view>
						</block>
					</template>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {getLivePortendDetailed} from '@/api/live.js'
	export default {
		data() {
			return {
				detail: {
					title: '',
					startTime: '',
					enterpriseList: [],
					introduce:'',
				},
				imageUrl:'',
				tabActive:1,
			}
		},
		methods: {
			navigatePos(id){
				uni.navigateTo({
					url:`/page_other/job_hunting/job_detail/index?id=${id}&type=${this.$store.getters.identity==2?'hr':''}`
				})
			},
			getDetail(id){
				uni.showLoading({
					title:'加载中',
					mask:true
				})
				getLivePortendDetailed({id}).then((data)=>{
					uni.hideLoading()
					data.enterpriseList.forEach((item, index) => {
						data.enterpriseList[index].show = false;
					})
					this.detail=data;
				}).catch(()=>{
					uni.hideLoading()
					this.showToast('加载失败');
				})
			}
		},
		onLoad(e) {
			this.imageUrl = this.globalConfig.imageUrl;
			this.getDetail(e.id)
		},
	}
</script>

<style lang="scss">
	$box-shadow: 0 0 10px 0 #efefef;

	page {
		background: #FAFAFA;
	}

	.content {
		width: 100%;
		padding: 0 30rpx;

		.enterprise-block {
			height: 201rpx;
			padding: 30rpx 0;
			border-bottom: 1px solid #efefef;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			flex: none;

			.enterprise-item {
				border-radius: 10rpx;
				padding: 20rpx;
				display: flex;
				flex-direction: row;
				height: 140rpx;

				.photo {
					width: 100rpx;
					height: 100rpx;
					border-radius: 16rpx;
					background: #f0f0f0;
					margin-right: 20rpx;
				}

				.info-block {
					width: calc(100% - 120rpx);
					height: 100rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.name {
						font-weight: bold;
						font-size: 30rpx;
					}

					.count {
						font-size: 28rpx;
						color: #fe7725;
					}
				}

				.iconfont {
					width: 30rpx;
					height: 100%;
					display: flex;
					align-items: center;
				}
			}

			.position-item {
				width: 100%;
				display: flex;
				flex-direction: column;
				padding: 30rpx;

				.job-title {
					font-size: 32rpx;
					font-weight: bold;
				}

				.address {
					font-size: 28rpx;
					color: #999;
					margin-top: 16rpx;
				}

				.job-title,
				.address,
				.wage {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.wage {
					color: #FE7526;
					font-size: 36rpx;
					font-weight: bold;
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-top: 16rpx;

					.unit {
						font-size: 28rpx;
						font-weight: normal;
					}
				}
			}
		}

		.enterprise-block:last-child {
			border-bottom: 1px solid rgba(0, 0, 0, 0);
		}

		.enterprise-block.show {
			height: auto;
			overflow: visible;
		}

		.block.tab-block {
			box-shadow: none;
			display: flex;
			flex-direction: row;
			justify-content: left;
			flex-wrap: wrap;
			width: 100%;

			

			.tab-item {
				padding: 10rpx 15rpx;
				font-weight: bold;
				font-size: 30rpx;
				margin-right: 30rpx;
			}

			.tab-item.active {
				background: url("https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/job_hunting/home/tab_selected_bg.png") no-repeat right bottom;
				background-size: 45%;
				font-size: 32rpx;
			}
		}
		.article-content {
			font-size: 27rpx;
			line-height: 50rpx;
			margin-top: 30rpx;
		}
		
		.list-block.block {
			margin-top: 30rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
		
			.company-item {
				.company-name {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 30rpx 0 20rpx 0;
		
					.name-block {
						display: flex;
						align-items: center;
						font-weight: bold;
		
						.line {
							width: 15rpx;
							height: 35rpx;
							border-radius: 16rpx;
							background-color: #FE7526;
							margin-right: 10rpx;
						}
					}
		
					.more {
						color: #999;
						font-size: 30rpx;
					}
				}
			}
		
			.list-item {
				width: 100%;
				background: #FAFAFA;
				border-radius: 10rpx;
				box-shadow: 0 0 10px 0 #efefef;
				padding: 20rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				margin: 20rpx auto;
		
				.cover-photo {
					width: 25%;
					height: 150rpx;
					background: #efefef;
					margin-right: 20rpx;
					border-radius: 20rpx;
		
				}
		
				.list-info {
					width: 70%;
					display: flex;
					flex-direction: column;
		
					view {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
		
					.title {
						color: #000;
						font-weight: bold;
						font-size: 34rpx;
					}
		
					.address {
						display: flex;
						flex-direction: row;
		
						.add {
							color: #999;
							font-size: 26rpx;
							margin-top: 30rpx;
						}
					}
		
					.city {
						color: #999;
						font-size: 26rpx;
						margin-left: 4rpx;
					}
		
					.imgs2 {
						width: 17px;
						height: 17px;
						margin-left: 70rpx;
						vertical-align: bottom;
					}
		
					.positionCount {
						font-size: 28rpx;
						margin-top: 30rpx;
					}
		
					.label-block {
						font-size: 24rpx;
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						justify-content: left;
						margin-top: 20rpx;
		
						.label-item {
							padding: 8rpx 20rpx;
							background: #F5F6F8;
							color: #999;
							margin: 0 10rpx 20rpx 0;
						}
					}
		
					.wage {
						color: #FE7526;
						font-size: 36rpx;
						font-weight: bold;
		
						.unit {
							font-size: 28rpx;
							font-weight: normal;
						}
					}
				}
			}
		
			.list-item.policy-item {
				height: 220rpx;
				width: 100%;
				padding: 30rpx 0;
				display: flex;
				flex-direction: row;
				border-radius: 20rpx;
				background: #fff;
				margin-bottom: 30rpx;
				padding: 20rpx;
				box-shadow: 0 0 10px 0 #efefef;
		
				.cover-photo {
					width: 180rpx;
					height: 180rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
					background: #efefef;
				}
		
				.info {
					width: calc(100% - 200rpx);
					height: 100%;
		
					.title {
						font-weight: bold;
					}
		
					.abstract {
						font-size: 24rpx;
						color: #999;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						margin-top: 10rpx;
						line-height: 1.5;
					}
		
					.time {
						margin-top: 10rpx;
						font-size: 28rpx;
						color: #999;
					}
				}
			}
		
			.detail-block {
				width: 100%;
				padding: 30rpx;
				margin: auto auto 30rpx auto;
				background-color: #fff;
		
				.title {
					font-size: 34rpx;
					font-weight: bold;
					margin-bottom: 30rpx;
				}
		
				.sub-title {
					font-size: 28rpx;
					color: #999;
					margin-bottom: 30rpx;
				}
		
				.article-content {
					font-size: 30rpx;
					line-height: 60rpx;
				}
			}
		
			.apply-btn {
				width: 50%;
				height: 70rpx;
				line-height: 70rpx;
				background-color: #ff7626;
				color: #fff;
				text-align: center;
				border-radius: 100rpx;
				margin: 40rpx auto;
			}
		
			.list-item {
				width: 100%;
				background: #fff;
				border-radius: 10rpx;
				box-shadow: $box-shadow;
				padding: 20rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				margin-bottom: 20rpx;
		
				.list-info {
					width: calc(100% - 0rpx);
					display: flex;
					flex-direction: column;
		
					view {
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
		
					.title {
						color: #000;
						font-weight: bold;
						font-size: 34rpx;
					}
		
					.address {
						color: #999;
						font-size: 26rpx;
						margin-top: 20rpx;
					}
		
					.label-block {
						font-size: 24rpx;
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						justify-content: left;
						margin-top: 20rpx;
		
						.label-item {
							padding: 8rpx 20rpx;
							background: #F5F6F8;
							color: #999;
							margin: 0 10rpx 20rpx 0;
						}
					}
		
					.wage {
						color: #FE7526;
						font-size: 36rpx;
						font-weight: bold;
		
						.unit {
							font-size: 28rpx;
							font-weight: normal;
						}
					}
				}
			}
		}

		.detail-block {
			width: 100%;
			padding: 30rpx;
			margin: auto auto 30rpx auto;
			background-color: #fff;
			border-radius: 20rpx;

			.time {
				margin-top: 10rpx;
				font-size: 25rpx;

			}

			.title {
				font-size: 34rpx;
				font-weight: bold;
				margin-bottom: 30rpx;
				border-bottom: 1px solid #efefef;
				height: 120rpx;
				padding-top: 32rpx;
			}

			.sub-title {
				font-size: 25rpx;
				color: #999;
				margin-bottom: 30rpx;
				padding-left: 10rpx;
				align-items: center;

			}

			.imgs {
				width: 30rpx;
				height: 30rpx;
				vertical-align: middle;
			}

		}

		.detail-count {
			width: 100%;
			padding: 30rpx;
			margin: auto auto 30rpx auto;
			background-color: #fff;
			border-radius: 20rpx;

			.label-title {
				width: 180rpx;
				border-right: 1px solid #efefef;
				font-size: 26rpx;
			}

			.label-title2 {
				width: 180rpx;
				border-right: 1px solid #efefef;
				font-size: 26rpx;
				text-align: center;

			}

			.label-titlenoBorder {
				width: 180rpx;
				font-size: 26rpx;
				margin-left: 20rpx;
				text-align: center;
			}

			.count {
				color: #ff7626;
				font-size: 32rpx;
				font-weight: bold;

			}
		}



	}
</style>
